<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>

    li {
        list-style: none;
    }

    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 200px;
        height: 500px;
        margin: 100px auto;

    }

    ul {
        display: none;
    }
</style>

<body>


<div class="box">
    <input type="search" placeholder="小米笔记本">
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
    </ul>
</div>


<script>

    const inputElement = document.querySelector('input');
    const ulElement = document.querySelector('ul');

    inputElement.addEventListener('focus', function () {
        ulElement.style.display = 'block'
    })

    inputElement.addEventListener('blur', function () {
        ulElement.style.display = 'none'
    })

</script>
</body>
</html>